<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表组</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body>

    <div class="container">
        <h1>基础的列表组</h1>
        <ul class="list-group">
            <li class="list-group-item">第一项</li>
            <li class="list-group-item">第二项</li>
            <li class="list-group-item">第三项</li>
        </ul>

        <hr>
        <h1>设置禁用和活动项</h1>
        <ul class="list-group">
            <li class="list-group-item active">第一项</li>
            <li class="list-group-item">第二项</li>
            <li class="list-group-item disabled">第三项</li>
        </ul>

        <hr>

        <h1>超链接项的列表组</h1>
        <ul class="list-group">
            <a href="#" class="list-group-item list-group-item-action">第一项</a>
            <a href="#" class="list-group-item list-group-item-action">第二项</a>
            <a href="#" class="list-group-item list-group-item-action">第三项</a>
        </ul>

         <h1>去掉边框</h1>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">第一项</li>
            <li class="list-group-item">第二项</li>
            <li class="list-group-item">第三项</li>
        </ul>


         <h1>水平列表组</h1>
        <ul class="list-group list-group-horizontal list-group-flush">
            <li class="list-group-item">第一项</li>
            <li class="list-group-item">第二项</li>
            <li class="list-group-item">第三项</li>
        </ul>


        <h1>带徽章的列表组</h1>
        <ul class="list-group">
            <li class="list-group-item">
                第一项
                <span class="badge bg-primary text-white">hot</span>
            </li>
            <li class="list-group-item">第二项</li>
            <li class="list-group-item">第三项</li>
        </ul>


         <h1>多种颜色的列表项</h1>
        <ul class="list-group">
            <li class="list-group-item list-group-item-primary">重要的</li>
            <li class="list-group-item list-group-item-secondary">次要的</li>
            <li class="list-group-item list-group-item-success">成功的</li>
            <li class="list-group-item list-group-item-info">信息的</li>
            <li class="list-group-item list-group-item-warning">警告的</li>
            <li class="list-group-item list-group-item-danger">危险的</li>
            <li class="list-group-item list-group-item-light">浅色的</li>
            <li class="list-group-item list-group-item-dark">深色的</li>
        </ul>


        <h1>自定义内容的列表组</h1>
        <ul class="list-group">
            <li class="list-group-item active">
                 <h4 >网站服务</h4>
                <small >这是里面的内容</small>
            </li>
            <li class="list-group-item">
                <h4>标题二</h4>
                <span>这是里面的内容</span>
            </li>
            <li class="list-group-item">
                <h4>标题三</h4>
                <span>这是里面的内容</span>
            </li>
        </ul>
    </div>
</body>
</html>